<template>
  <div>
    <!-- 基本信息 -->
    <div v-for="(item, index) in overviewData" class="mb-5" :key="index">
      <el-descriptions
        class="margin-top"
        title="With border"
        :column="2"
        border
      >
        <template #title>
          <TitleName
            :title="item.title"
            icon="i-carbon-bookmark-filled"
            class="title"
          ></TitleName>
        </template>
        <el-descriptions-item
          :label="t.label"
          v-for="(t, i) in item.list"
          :key="i"
          label-align="right"
          label-class-name="w-3/24"
          class-name="w-9/24"
        >
          <!--      项目阶段        -->
          <template v-if="t.prop === 'proSchedule'">
            <dict-tag
              :isTag="false"
              :options="project_phase"
              :value="overviewInfo[t.prop]"
            />
          </template>
          <!-- proSum 项目金额 -->
          <template v-else-if="t.prop === 'proSum'">
            {{
              overviewInfo[t.prop] != null ? overviewInfo[t.prop] + '万元' : ''
            }}
          </template>
          <!--      项目属性       -->
          <template v-else-if="t.prop === 'proType'">
            <dict-tag
              :isTag="false"
              :options="project_properties"
              :value="overviewInfo[t.prop]"
            />
          </template>
          <!--      业务属性       -->
          <template v-else-if="t.prop === 'busType'">
            <dict-tag
              :isTag="false"
              :options="business_attribute"
              :value="overviewInfo[t.prop]"
            />
          </template>
          <!--      业务归属       -->
          <template v-else-if="t.prop === 'businessBelong'">
            {{ overviewInfo[t.prop] == 'ZW' ? '政务' : '企业' }}
          </template>
          <template v-else-if="t.prop === 'tenderer'">
            {{
              bidding_unit.find(v => v.value === overviewInfo[t.prop])?.label
            }}
          </template>
          <template v-else>{{ overviewInfo[t.prop] }}</template>
        </el-descriptions-item>
        <el-descriptions-item
          label="项目所需材料"
          label-align="right"
          :span="2"
        >
          {{ overviewInfo.materials }}
          <a
            :href="overviewInfo.proFileUrl"
            target="_blank"
            v-if="overviewInfo.proFileUrl"
            class="ml-15px text-#1890ff font-bold"
            >下载</a
          >
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup name="POverview">
import { getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import {
  project_phase, //项目阶段
  project_properties, //项目属性
  business_attribute, //业务属性
  contract_status,
  bidding_unit
} from '@/hooks/dict/useProject'
const router = useRouter()
const { proxy } = getCurrentInstance()
// 接受父级传递的参数
const props = defineProps({
  baseDetail: {
    required: true,
    type: Object || Array,
    default: () => {
      return {}
    }
  },
  financeDetail: {
    required: true,
    type: Object || Array,
    default: () => {
      return {}
    }
  },
  biddingDetail: {
    type: Object,
    default: () => {}
  }
})
watchEffect(
  () => {
    overviewInfo.value = {
      ...props.baseDetail,
      ...props.financeDetail,
      tenderer: props.biddingDetail.tenderer
    }
  },
  {
    flush: 'post'
  }
)

const data = reactive({
  contractParam: {},
  //详情的数据
  overviewInfo: {},
  overviewData: [
    {
      title: '基本信息',
      list: [
        { label: '项目名称', prop: 'proName' },
        { label: '项目编号', prop: 'proNum' },
        { label: '项目阶段', prop: 'proSchedule' },
        { label: '项目属性', prop: 'proType' },
        { label: '业务属性', prop: 'busType' },
        { label: '项目金额', prop: 'proSum' },
        { label: '归属公司', prop: 'companyName' },
        { label: '归属部门', prop: 'dept' },
        { label: '项目负责人', prop: 'principal' },
        { label: '客户名称', prop: 'customer' },
        { label: '客户联系人', prop: 'cusLinkName' },
        { label: '联系电话', prop: 'phone' },
        { label: '投标单位', prop: 'tenderer' },
        { label: '业务归属', prop: 'businessBelong' }
      ]
    }
  ]
})
const { contractParam, overviewData, overviewInfo } = toRefs(data)
</script>

<style scoped lang="scss"></style>
